/**
 * change事件 返回被点击项的全部数据
 */
<template>
	<view class="list" :style="{gridTemplateColumns: `repeat(${lineNum},1fr)`}" >
		<view class="item"  v-for="icon_item in data">
			<view class="item_box" :style="{opacity:showimg?'1':'0'}" @tap="tap_item(icon_item)">
				<image :src="icon_item.icon" mode="widthFix"></image>
				<view v-if="icon_item.name">{{icon_item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 每行显示几个按钮
			 */
			lineNum: {
				type: Number,
				default: 4
			},
			/**
			 * 按钮数组
			 * [{icon:'按钮图片地址',name:'按钮标题文字/可不写'}]
			 */
			data: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				showimg: false,
			};
		},
		created() {
			// 解决图片不设置高度导致的页面跳动
			setTimeout(() => {
				this.showimg = true
			}, 800)
		},
		methods: {
			tap_item(item) {
				this.$emit('change',item)
			}
		}
	}
</script>

<style lang="scss">
	.list {
		display: grid;
		.item {
			.item_box {
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				align-items: center;
				transition: 0.2s;

				image {
					width: 100%;
					transition: 0.3s;

					&:active {
						transform:scale(0.9);
						opacity: 0.7;
					}
				}

				view {
					color: #2B2F33;
					font-size: 14px;
					text-align: center;
					margin-top: 10rpx;
					white-space: nowrap
				}
			}
		}

	}
</style>
